<template>
  <div class="product-banner-3">
    <div class="product-model">
      <div class="content f f-ac f-jc">
        <div class="content-box">
          <div class="f f-col f-jb">
            <div>
              <Title
                v-slide-up
                title="APP FUNCTIONS"
                color="linear-gradient(90deg, #4580dd 0%, rgba(0, 0, 0, 0) 100%)"
                size="16"
                bold="700"
                sub-title="APP 功能展示"
                sub-color="#0e0b31"
                sub-size="24"
                sub-bold="700"
                gap="10"
              />
              <div class="g g2 gap10 mt27">
                <div v-slide-plus v-for="(i, k) in info.show" :key="k" class="g-item">
                  <Title
                    :title="i.name"
                    color="#000"
                    size="14"
                    bold="700"
                    line="1"
                    :sub-title="i.introduce"
                    sub-color="#878597"
                    sub-size="12"
                    sub-line="3"
                    :line-height="18"
                    gap="10"
                  />
                </div>
              </div>
            </div>
            <div v-slide-up class="btn-box" @click="handleContact">立即咨询</div>
          </div>
          <img v-slide-plus :src="info.image4" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["contact"]);

// 立即咨询
const handleContact = () => {
  emit("contact", `APP功能展示：${props.info.name}`);
};
</script>
<style lang="scss" scoped>
.product-banner-3 {
  width: 100%;
  background: url("../../../../assets/product/banner_block_bg.png") no-repeat;
  background-size: 427px 570px;
  background-position: right bottom;
  background-color: #fff;
  .product-model {
    width: 90%;
    margin: 0 auto;
    height: 570px;
    position: relative;
    .content {
      width: 100%;
      height: 570px;
      .content-box {
        display: flex;
        width: 100%;
        > div {
          flex: 1;
          .g-item {
            height: 103px;
            border-radius: 10px;
            padding: 12px;
            background: #fff;
            border: 1px solid #e5e5e5;
            transition: all 0.3s;
            box-sizing: border-box;
            &:hover {
              box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
              border: 1px solid #e5e5e5;
            }
          }
          .btn-box {
            width: 164px;
            height: 54px;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #4580dd;
            &:hover {
              cursor: pointer;
              background-color: #3a6dc0;
            }
          }
        }
        img {
          width: 648px;
          height: 525px;
          object-fit: cover;
          filter: drop-shadow(0 0 10px rgba(101, 101, 101, 0.5));
        }
      }
    }
  }
}
</style>
